<template>
  <div class="container" @click="setActive">
    <el-row :gutter="20">
      <el-col :span="8"
        ><div
          :class="{ highlight: activeIndex === 0 }"
          class="grid-content bg-purple"
          @click="getComputOptopm(0)"
          data-Index="0"
        >
          呼气流量峰值（PEF）预测
        </div></el-col
      >
      <el-col :span="8"
        ><div
          :class="{ highlight: activeIndex === 1 }"
          class="grid-content bg-purple"
          @click="getComputOptopm(1)"
          data-Index="1"
        >
          肺活量相关计算
        </div></el-col
      >
      <el-col :span="8"
        ><div
          :class="{ highlight: activeIndex === 2 }"
          class="grid-content bg-purple"
          @click="getComputOptopm(2)"
          data-Index="2"
        >
          男性 MultiCalc 校正 PFT
        </div></el-col
      >
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"
        ><div
          :class="{ highlight: activeIndex === 3 }"
          class="grid-content bg-purple"
          @click="getComputOptopm(3)"
          data-Index="3"
        >
          女性 MultiCalc 校正 PFT
        </div></el-col
      >
      <el-col :span="8"
        ><div
          :class="{ highlight: activeIndex === 4 }"
          class="grid-content bg-purple"
          @click="getComputOptopm(4)"
          data-Index="4"
        >
          男孩 MultiCalc PFT 预测值
        </div></el-col
      >
      <el-col :span="8"
        ><div
          :class="{ highlight: activeIndex === 5 }"
          class="grid-content bg-purple"
          @click="getComputOptopm(5)"
          data-Index="5"
        >
          女孩 MultiCalc PFT 预测值
        </div></el-col
      >
      <!-- <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> -->
    </el-row>
    <Computed :option="compoteOption"></Computed>
  </div>
</template>

<script>
import Computed from "../components/computed.vue";
export default {
  name: "Zhibiao",
  components: {
    Computed,
  },
  data() {
    return {
      compoteOption: {},
      activeIndex: -1,
    };
  },
  methods: {
    getComputOptopm(index) {
      const obj1 = {
        index: 1,
        input: ["身高(cm)", "年龄"],
        output: ["呼气流量峰值 女性", "呼气流量峰值 男性"],
      };
      const obj2 = {
        index: 2,
        input: [
          "补呼气容积（L）",
          "残气容积（L）",
          "补吸气容积（L）",
          "潮气容积（L）",
          "闭合容积（L）",
        ],
        output: [
          "功能残气量",
          "深吸气量",
          "肺总量",
          "肺活量",
          "闭合气量",
          "闭合容积－肺活量比值",
          "闭合气量－肺总量比值",
          "残气容积－肺总量比值",
        ],
      };
      const obj3 = {
        index: 3,
        input: ["身高(cm)", "年龄"],
        output: ["FEV1 （最大呼气量）", "FVC （用力肺活量）", "FEV1 FVC 比值"],
      };
      const obj4 = {
        index: 4,
        input: ["身高(cm)", "年龄"],
        output: ["FEV1 （最大呼气量）", "FVC （用力肺活量）", "FEV1 FVC 比值"],
      };
      const obj5 = {
        index: 5,
        input: ["身高(cm)", "年龄"],
        output: ["FEV1 （最大呼气量）", "FVC （用力肺活量）", "FEV1 FVC 比值"],
      };
      const obj6 = {
        index: 6,
        input: ["身高(cm)", "年龄"],
        output: ["FEV1 （最大呼气量）", "FVC （用力肺活量）", "FEV1 FVC 比值"],
      };
      const arr = [obj1, obj2, obj3, obj4, obj5, obj6];
      this.compoteOption = arr[index];
    },
    setActive(event) {
      let index = event.target.dataset.index;
      if (index === undefined) {
        return;
      } else {
        this.activeIndex = Number(index);
      }
    },
  },
};
</script>


<style lang="less" scoped>
.container{
  padding: 80px 20px 0 20px;
  background-color: #e5e9f2;
  height: 90vh;
}
.highlight {
  background-color: #54b9c1 !important;
}
.el-row {
  margin-top: 30px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  &:hover {
    cursor: pointer;
  }
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #fff;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  font-size: 30px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>